<template>
	<!-- 我的 -->
	<view class="my">
		<view class="bg_top" :style="'height:'+(2*menuButtonInfo.top+ 74)+'rpx'"></view>
		<view class="_top" :style="'height: '+ menuButtonInfo.top+'px;'"></view>
		<view class="_top_title z_index" :style="'top:'+(2*menuButtonInfo.top)+'rpx'">
			我的
		</view>
		<view class="content" :style="'padding-top:'+ (2*menuButtonInfo.top+28) + 'rpx'">

			<!-- 名片 -->
			<view v-if="isMember">
				<callingcard @ff_isPopup=ffIsPopup :userObj="userObjs" :isPath="true" @goCalendarPath="goCalendarPaths">
				</callingcard>
			</view>
			<view v-else class="islogin">
				<view class="islogin_">
					<image class="islogin_image" src="https://z3.ax1x.com/2021/09/17/4Mlhex.png"></image>
					<view class="islogin_title" @click="initUser">立即登录</view>
				</view>
			</view>

			<view class="task" @click="goMyTask">
				<view class="taskTop">
					<image src="/static/huodo.png"></image>
					<span class="Top01">活动任务</span>
				</view>
				<view class="taskBottom">
					<!-- <span class="Bottom01" v-if="proceedSum != 0">{{proceedSum}}</span> -->
					<span class="Bottom01" v-if="proceedSum != 0">{{proceedSum}}</span>
					<image src="https://z3.ax1x.com/2021/08/27/hQDCz4.png"></image>
				</view>
			</view>


			<view class="follow">
				<view class="follow_" @click="goMyFans(0)">
					关注
					<text>{{userObjs.follow}}</text>
				</view>
				<view class="hr"></view>
				<view class="fans" @click="goMyFans(1)">
					粉丝
					<text>{{userObjs.fans}}</text>
				</view>
			</view>

			<view class="privilege" v-if="userObjs.verifier" @click="goCancel">
				<view class="privilege_image">
					<image src="/static/shaoma.png"></image>
				</view>
				<view class="privilege_title">扫码核销</view>
				<view class="privilege_image_">
					<image src="https://z3.ax1x.com/2021/08/27/hQDCz4.png"></image>
				</view>
			</view>
			<view class="privilege" @click="goMyPrivilege">
				<view class="privilege_image">
					<image src="/static/tequan.png"></image>
				</view>
				<view class="privilege_title">我的特权卡</view>
				<view class="privilege_image_">
					<image src="https://z3.ax1x.com/2021/08/27/hQDCz4.png"></image>
				</view>
			</view>

			<view class="privilege" @click="goParticipate">
				<view class="privilege_image">
					<image src="/static/canyu.png"></image>
				</view>
				<view class="privilege_title">我参与的活动</view>
				<view class="privilege_image_">
					<image src="https://z3.ax1x.com/2021/08/27/hQDCz4.png"></image>
				</view>
			</view>

			<view class="privilege label" @click="goLabel">
				<view class="privilege_label"></view>
				<view class="privilege_title">我的标签</view>
				<view class="privilege_image_">
					<image src="https://z3.ax1x.com/2021/08/27/hQDCz4.png"></image>
				</view>
			</view>

			<view class="labelBox">
				<!-- :labelData="labelDatas" -->
				<mylabel :labelData="labelLists"></mylabel>
			</view>
			<!--  @click.stop="goMyDynamic" -->
			<view class="privilege label" v-if="isArise" @click.stop="goMyDynamic">
				<view class="privilege_label"></view>
				<view class="privilege_title">我的动态</view>
				<view class="privilege_image_">
					<image src="https://z3.ax1x.com/2021/08/27/hQDCz4.png"></image>
				</view>
			</view>
		</view>
		<view class="falls" v-if="isArise">
			<fallsmy ref="fallsmy" @addRandomDatas="onReachBottom" :loadStatus="loadStatux" :flowList="flowLists">
			</fallsmy>
		</view>

		<perfectbox :img="imgs" pagepath="../my/setting/setting?login=1" :inviteCode="inviteCodex" :show="isShow"
			@ff_show="ffShows">
		</perfectbox>

		<u-popup v-model="isPopup" mode="center" border-radius="14">
			<view class="popBox">
				<image @click.stop="ffChacha" class="popCha" src="../../static/chacha.png" mode="widthFix"></image>
				<view class="conBox">
					<image :class="'conBoxImg'+ ((popObj.num == 0) ? ' dot' : '')" :src="popObj.url" mode="widthFix">
					</image>
					<view class="conBoxTitle">{{popObj.title}}者</view>
					<text class="conBoxText">
						{{popObj.text}}</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import falls from "@/components/falls/falls.vue";
	import fallsmy from "@/components/falls/fallsmy.vue";
	import mylabel from "@/components/mylabel/mylabel.vue";
	import empty from "../../components/defaultpage/empty.vue"
	import perfectbox from "../../components/perfectbox/perfectbox.vue";

	// mylabel
	// fallsmy
	import callingcard from "@/components/callingcard/callingcard.vue"
	export default {
		data() {
			return {
				menuButtonInfo: {
					top: 25
				},
				inviteCodex: '',
				// 0：出现邀请码的完善信息  1：出现普通的完善信息 2：隐藏
				isShow: 2,
				dynamicNum: 1,
				pageSize: 8,
				userObjs: {

				},
				loadStatux: 'Loading',
				flowLists: [],
				isTrue: false,
				lists: [],
				proceedSum: 0,
				labelLists: [],
				userPhoneApi: '',
				imgs: "",
				isMember: "",
				isPopup: false,
				popObj: {
					url: "https://oss-images.lclook.com/upload/2021/09/23/1632382096258.png",
					title: "",
					text: ""
				}
			}
		},
		onLoad() {

			this.init();

			// debugger
			// this.addRandomData();
		},
		onReachBottom() {
			// debugger
			if (this.isTrue && this.flowLists.length != 0) {
				this.loadStatux = 'Loading';

				this.dynamicNum++;

				this.initFansDynamic();


			}

		},
		onShow() {


			this.isTrue = true;

			// debugger

			this.initUser();




		},
		computed: {
			isArise() {
				return this.$store.state.isArise;
			},
			Version() {
				return this.$store.state.Version;
			}
		},
		components: {
			fallsmy,
			callingcard,
			mylabel,
			perfectbox,
			empty,
		},

		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: 'chimian',
				path: '/pages/my/my'
			}
		},
		methods: {
			// 数组去重
			//  方法2：利用reduce方法遍历数组,reduce第一个参数是遍历需要执行的函数，第二个参数是item的初始值
			deWeight(arr) {
				var obj = {};
				let newArr = arr.reduce(function(item, next) {
					obj[next.idx] ? '' : obj[next.idx] = true && item.push(next);
					return item;
				}, []);
				return newArr;
			},
			ffShows() {
				this.isShow = 2;
			},

			goRegister() {
				uni.navigateTo({
					url: "../register/register"
				})
			},
			ffIsPopup(data) {
				// debugger
				this.popObj = data;
				// debugger
				this.isPopup = true;
			},

			goCalendarPaths() {
				// debugger
				uni.navigateTo({
					url: `myCalendar/myCalendar?face=${this.userObjs.amianCoin}`
				})
			},
			initObj() {
				return new Promise((rets, rejs) => {
					this.isShow = 2;
					this.$apis.accountInfo().then(res => {
						if (res.data.version == this.Version) {

							this.$store.commit('updataArise', true);
						} else {
							this.$store.commit('updataArise', false);
						}
						// debugger
						if (res.code == 200) {
							this.proceedSum = res.data.taskNum
							this.activityId = res.activityId;
							this.userObjs = res.data.user;
							this.userObjs.verifier = res.data.user.roles.split(',')[1];
							this.userObjs.Phone = res.data.phone;
							this.isMember = res.data.isMember;
							this.$store.commit('updatauserObj', this.userObjs);
							// debugger
							this.userPhoneApi = res.data.phone;
							this.needInviteCode = res.data.needInviteCode
							this.imgs = res.data.awardPrivilegeBg;


							if (res.data.needInviteCode) {

								if (res.data.inviteCode) {
									this.inviteCodex = res.data.inviteCode.code;
									if (!res.data.isMember) {
										// debugger
										this.isShow = 0
										rets();
									} else {
										// debugger
										this.isShow = 2
										rets();
									}
								}
							} else {
								if (!res.data.isMember) {
									// debugger
									this.isShow = 1
									rets();
								} else {
									// debugger
									this.isShow = 2
									rets();
								}
							}

						}

					}).catch(err => {
						this.isShow = 2;
						rets();
						console.log("个人信息错误", err)
					})
				})

			},
			initUser() {
				this.isShow = 2;
				this.$apis.accountInfo().then(res => {
					if (res.code == 200) {
						this.proceedSum = res.data.taskNum
						this.activityId = res.activityId;
						this.userObjs = res.data.user;
						this.userObjs.verifier = res.data.user.roles.split(',')[1];
						this.userObjs.Phone = res.data.phone;
						if (res.data.version == this.Version) {

							this.$store.commit('updataArise', true);
						} else {
							this.$store.commit('updataArise', false);
						}
						// debugger
						this.userPhoneApi = res.data.phone;
						this.isMember = res.data.isMember;
						this.needInviteCode = res.data.needInviteCode
						this.imgs = res.data.awardPrivilegeBg;

						if (res.data.needInviteCode) {

							if (res.data.inviteCode) {
								this.inviteCodex = res.data.inviteCode.code;
								if (!res.data.isMember) {
									// debugger
									this.isShow = 0
								} else {
									this.$store.commit('updatauserObj', this.userObjs);
									// debugger
									this.isShow = 2
								}
							}
						} else {
							if (!res.data.isMember) {
								// debugger
								this.isShow = 1
							} else {
								// debugger
								this.isShow = 2
								this.$store.commit('updatauserObj', this.userObjs);
							}
						}

						this.initFansDynamic();


						this.labelList();
					}

				}).catch(err => {
					this.isShow = 2;
					console.log("个人信息错误", err)
				})

			},
			init() {
				// #ifndef H5 || APP-PLUS || MP-ALIPAY
				this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				// #endif
			},
			// 请求用户动态数据列表
			initFansDynamic() {
				// /amianfrontend/dynamic/list/{userId}
				let req = {};
				req.pageNum = this.dynamicNum;
				// debugger
				req.pageSize = this.pageSize;
				// ljUrl
				this.$apis.dynamicListId(
					this.userObjs.userId,
					req
				).then(res => {
					if (res.code == 200) {

						if (res.rows.length != 0) {
							let flowListsPush = [];
							let newFlowLists = JSON.parse(JSON.stringify(this.flowLists))
							res.rows.forEach(item => {
								flowListsPush.push({
									page: '../../pages/flour/flourdetails/flourdetails',
									image: item.imageList[0],
									imageList: item.imageList,
									activityId: item.activityId,
									dynamicId: item.dynamicId,
									id: item.dynamicId,
									isTrue: true,
									idx: item.dynamicId,
									// name: item.
								})
							})
							newFlowLists = [...newFlowLists, ...flowListsPush];
							newFlowLists = this.deWeight(newFlowLists);
							this.flowLists = JSON.parse(JSON.stringify(newFlowLists));
							console.log("this.lists请求后的", this.flowLists);
							this.loadStatux = '';
							if (res.rows.length < this.pageSize) {


								this.isTrue = false;
								this.loadStatux = 'moduleNomore';

							}
							// debugger
						} else {
							// debugger
							this.isTrue = false;
							this.loadStatux = 'moduleNomore';
							if (this.dynamicNum == 1) {
								// debugger
								this.loadStatux = 'empty';
							}
						}

					}
				})
			},
			// 获取用户标签
			labelList() {
				this.$apis.labelList().then(res => {
					if (res.code == 200) {

						this.labelLists = this.initPro(res.data);
					}
				})
			},
			// 标签格式数据
			initPro(data) {
				let lArrNum = 0;
				let labeMyArr = [];
				let lArr = [];
				let labelArr = [];
				let nextArr = [];
				let Length = 19;
				let newlArr = ''

				// 扁平化自己的标签
				data.forEach((item, index) => {
					// console.log(item)
					item.labelList.forEach((newItem, newIndex) => {
						if (newItem.userLabelId != 0) {
							labeMyArr.push(newItem);
						}
					})
				})
				console.log('labeMyArr---->', labeMyArr)

				// 初加工标签列表
				labeMyArr.forEach((item, index) => {
					
					lArr.push(item.label)
					newlArr = lArr.join('').split('');
					
					
					let len = 0;
					newlArr.forEach((newItem,newIndex)=>{
						// 标签标注化字符 汉字占2个字符 除汉字外的字符串占1个字符
						let isTest = /^[\u4e00-\u9fa5]+$/;
						if (isTest.test(newItem)) {
							len = len + 2;
						} else {
							len++;
						}
					});
					
					console.log('每个标签标注化====>',item.label,len);
					// 判断该列是否符合标准长度
					if (len > Length) {
						let nextArr01 = lArr.pop();
						nextArr = JSON.parse(JSON.stringify(lArr));
						lArr = [];
						labelArr.push({
							liNum: 0,
							lis: nextArr
						});
						console.log('超出的单个标签 重新组一行----->', nextArr01)
						lArr.push(nextArr01);
						
						if(index == labeMyArr.length-1){
							labelArr.push({
								liNum: 0,
								lis: lArr
							});
						}
						// debugger
					
					}else{
						
						if(index == labeMyArr.length-1){
							nextArr = JSON.parse(JSON.stringify(lArr));
							
							console.log('满足标准行的长度 index------>',index,labeMyArr.length-1,nextArr)
							labelArr.push({
								liNum: 0,
								lis: nextArr
							});
						}
					}				
				});
				
				
				
                // 每行字体的设置处理
				let maxSum = labelArr.length % 2 == 0 ? (labelArr.length / 2 + 1) : (labelArr.length + 1) / 2;
				// let newLists = [];
				labelArr.forEach((item, index) => {
					let newIndex = index + 1;
					if (maxSum == newIndex) {
						item.liNum = 0;
					} else if (newIndex > maxSum) {
						item.liNum = 2 * (newIndex - maxSum);
					} else if (newIndex < maxSum) {
						item.liNum = 2 * (maxSum - newIndex) - 1;
					}
				})
				let newLabelArr = JSON.parse(JSON.stringify(labelArr))
				console.log('最后生成的标签列表------>', newLabelArr);
				// console.log('一共有多少条标签---->', lArrNum)
				return newLabelArr;

			},
			ffChacha() {
				this.isPopup = false;
			},
			goCancel() {
				uni.navigateTo({
					url: "myCancel/index"
				})
			},
			goMyFans(index) {
				this.initObj().then(res => {
					// debugger
					if (this.isShow == 2) {
						uni.navigateTo({
							url: "myFans/myFans?followIndex=" + index
						})
					}

				})

			},
			goLabel() {
				this.initObj().then(res => {
					// debugger
					if (this.isShow == 2) {
						uni.navigateTo({
							url: "label/label?isTrue=" + true
						});
					}

				})

			},
			goMyPrivilege() {
				this.initObj().then(res => {
					// debugger
					if (this.isShow == 2) {
						uni.navigateTo({
							url: "myPrivilege/myPrivilege"
						})
					}

				})

			},
			goParticipate() {

				this.initObj().then(res => {
					// debugger
					if (this.isShow == 2) {
						uni.navigateTo({
							url: "participate/participate"
						})
					}

				})
			},
			goMyDynamic() {
				this.initObj().then(res => {
					// debugger
					if (this.isShow == 2) {
						uni.navigateTo({
							url: `myDynamic/myDynamic`
						})
					}

				})

			},

			goMyTask() {
				this.initObj().then(res => {
					// debugger
					if (this.isShow == 2) {
						uni.navigateTo({
							url: "myTask/myTask"
						})
					}

				})

			}



		}
	}
</script>

<style lang="scss">
	.demo-warter {
		// border-radius: 8px;
		margin-bottom: 4rpx;

		position: relative;
	}

	.warter-left {
		margin-right: 4rpx;
	}


	.islogin {
		background: #2d3034;
		border-radius: 12rpx;
		width: 670rpx;
		height: 240rpx;
	}

	.islogin_ {
		margin: 0 40rpx;
	}

	.islogin_image {
		margin-top: 40rpx;
		margin-right: 30rpx;
		width: 160rpx;
		height: 160rpx;
		display: inline-block;
		vertical-align: top;
	}

	.islogin_title {
		display: inline-block;
		font-size: 30rpx;
		color: #ffffff;
		font-weight: 700;
		line-height: 240rpx;
	}

	.my {
		.content {
			margin: 0 40rpx 0 40rpx;
		}

		.bg_top {
			width: 750rpx;
			background-color: #ffffff;
			position: fixed;
			z-index: 9;
		}

		._top {
			width: 750rpx;
		}

		._top_title {
			width: 750rpx;
			font-size: 56rpx;
			font-weight: 700;
			color: #040000;
			line-height: 60rpx;
			padding: 1rpx 0 14rpx 40rpx;
			position: fixed;
		}

		.z_index {
			z-index: 10;
		}


		.task {
			margin-top: 20rpx;
			/* width: 634rpx; */
			height: 100rpx;
			background: #f0f1f2;
			border-radius: 6px;
			color: #FFFFFF;
			line-height: 100rpx;
			/* padding-left: 36rpx; */
			position: relative;
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx;
			align-items: center;

		}

		.taskTop {
			display: flex;
			align-items: center;

			.Top01 {
				font-size: 26rpx;
				font-family: Source Han Sans CN, Source Han Sans CN-Regular;
				font-weight: 400;
				text-align: LEFT;
				color: #2d3034;
			}

			image {
				width: 50rpx;
				height: 50rpx;
				margin-right: 6rpx;

			}
		}

		.taskBottom {
			display: flex;
			align-items: center;

			image {
				width: 32rpx;
				height: 32rpx;
				// position: absolute;
				// right: 20rpx;
				// top: 34rpx;
			}

			.Bottom01 {
				display: inline-block;
				font-size: 24rpx;
				font-family: nominal;
				font-weight: 400;
				text-align: LEFT;
				color: #ffffff;
				width: 38rpx;
				height: 38rpx;
				line-height: 38rpx;
				text-align: center;
				opacity: 1;
				background: #ff4341;
				border-radius: 50%;
				margin-right: 4rpx;
			}
		}


		.follow {
			position: relative;
			width: 670rpx;
			height: 100rpx;
			line-height: 100rpx;
			color: #2d3034;
			font-size: 26rpx;
			background: #f0f1f2;
			border-radius: 6px;
			margin-top: 20rpx;
		}

		.follow_ {
			display: inline-block;
			width: 294rpx;
			padding-left: 40rpx;
			position: relative;
		}

		.follow_ text {
			position: absolute;
			right: 30rpx;


			font-size: 30rpx;
			font-family: nominal;
			font-weight: SemiBold;
			color: #2d3034;
		}

		.hr {
			display: inline-block;
			height: 36rpx;
			width: 2rpx;
			background: #e1e3e5;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
		}

		.fans {
			position: relative;
			width: 294rpx;
			padding-left: 40rpx;
			display: inline-block;
		}

		.fans text {
			position: absolute;
			right: 44rpx;
			font-size: 30rpx;
			font-family: nominal;
		}

		.privilege {
			width: 670rpx;
			margin-top: 40rpx;
			margin-bottom: 20rpx;
			position: relative;
			display: flex;
			align-items: center;
		}

		.privilege_image {
			display: inline-block;
			vertical-align: top;
			display: flex;
		}

		.privilege_image image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 22rpx;
		}

		.privilege_title {
			display: inline-block;
			color: #2d3034;
			font-size: 34rpx;
			font-weight: 700;
			vertical-align: top;
		}

		.privilege_image_ {
			display: inline-block;
			vertical-align: top;
			position: absolute;
			top: 5rpx;
			right: 0;
			display: flex;
		}

		.privilege_image_ image {
			width: 32rpx;
			height: 32rpx;
		}

		.label {
			margin-top: 60rpx;
		}

		.privilege_label {
			display: inline-block;
			width: 8rpx;
			height: 34rpx;
			background: #f10200;
			margin-right: 14rpx;
		}

		.my_label {
			// margin-top: 14rpx;
			font-weight: 800;
		}

		.my_label {}

		.my_label span {
			display: inline-block;
			width: 22rpx;
			height: 22rpx;
			border-radius: 50%;
			background-color: #000000;
			margin: 0 10rpx;

		}

		.my_label_ {
			// margin-top: 16rpx;
			display: flex;
			align-items: center;

		}

		.my_label1 {
			font-size: 44rpx;
		}

		.my_label2 {
			font-size: 62rpx;
		}

		.my_label3 {
			font-size: 72rpx;
		}

		.my_label4 {
			font-size: 54rpx;
		}

		.my_label5 {
			font-size: 36rpx;
		}

		.conBox {
			text-align: center;
			padding-top: 60rpx;
		}

		.conBoxTitle {
			font-size: 44rpx;
			font-weight: 700;
		}

		.conBoxText {
			margin-top: 20rpx;
			font-size: 34rpx;
			text-align: left;
			line-height: 48rpx;
			/* text-indent: 15rpx; */
			height: 260rpx;
			overflow-y: scroll;
			word-wrap: break-word;
			word-break: break-all;
			display: flex;
		}



		.popBox {
			width: 620rpx;
			height: 774rpx;
			background-color: #fff;
			position: relative;
			padding: 20rpx 40rpx;
			box-sizing: border-box;
		}

		.popCha {
			z-index: 99;
			width: 80rpx;
			position: absolute;
			top: 15rpx;
			right: 15rpx;
		}

		.conBoxImg {
			width: 320rpx;
		}

		.dot {
			filter: grayscale(100%);
			filter: gray;
		}
	}
</style>
